<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="site/common::header('视频列表')"/>
    <link rel="stylesheet" th:href="@{/site/css/framework.css}">
</head>
<body>
    <!-- 头部 -->
    <th:block th:include="site/common::navigation"/>
    <!-- 面包屑 -->
    <div class="breadcroumb-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcroumb-title text-center">
                        <h1>视频</h1>
                        <h5><a href="/">首页</a>/视频</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
    <div class="container">
        <div class="row mb-3">
            <div class="col-lg-12 col-md-12 col-12 m-auto">
                <div class="indexNewsTit mt-3 mb-3">
                    <ul>
                        <li th:each="category,stat:${categories}" th:id="${category.id}" th:text="${category.name}" th:if="${stat.first}" class="info_active">
                        <li th:each="category,stat:${categories}" th:id="${category.id}" th:text="${category.name}" th:unless="${stat.first}">
                    </ul>
                </div>
                <div class="row grid-list" id="video-list">
                    <div class="col-lg-4 col-md-6 col-sm-12 col-12 mb-3 grid-area" v-for="video in videos">
                        <div class="video-card wow fadeInUp" data-wow-delay=".5s">
                            <div class="video-card-image">
                                <a v-bind:href="'/video/' + video.id" target="_blank">
                                    <img class="img-fluid" v-bind:src="video.cover" v-bind:alt="video.title">
                                </a>
                            </div>
                            <div class="video-card-body">
                                <div class="video-title">
                                    <a class="play-icon" v-bind:href="'/video/' + video.id" target="_blank">
                                        {{video.title}}
                                    </a>
                                </div>
                                <div class="video-author">
                                    {{video.author_name}}
                                </div>
                                <div class="video-date">
                                    <i class="las la-calendar"></i>&nbsp;{{video.publish_time}}
                                </div>
                                <a class="details " v-bind:href="'/video/' + video.id" target="_blank">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-5 mb-5 more">
                    <a href="javascript:;">查看更多</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <th:block th:include="site/common::footer"/>
</body>
<th:block th:include="site/common::js"/>
<script>
    var category;
    var page = 1;

    var vm = new Vue({
        el: "#video-list",
        data: {
            videos: []
        },
        mounted: function () {
            loadVideos(false);
        }
    });

    $(".more").click(function () {
        page += 1;
        loadVideos(false);
    });

    $(".indexNewsTit").delegate("li", "click", function () {
        category = $(this).attr("id");
        page = 1;
        loadVideos(true);
        $(".indexNewsTit li").each(function () {
            $(this).removeClass("info_active");
            if ($(this).attr("id") == category) {
                $(this).addClass("info_active");
            }
        })
    });

    function loadVideos(empty) {
        if (!category) {
            category = $(".info_active").attr("id");
        }
        var url = "/api/video/" + category + "/" + page;
        $.get(url, function (result) {
            if(empty) {
                vm.videos = [];
            }
            if(result.code == 0) {
                for(var i =0; i< result.rows.length; i++) {
                    vm.videos.push(result.rows[i]);
                }
            }
        });
    }
</script>
</html>